<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>消息中心</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">    
    <link rel="shortcut icon" href="../image/favicon.ico" type="image/x-icon">

    <link rel="stylesheet" href="../layui/css/layui.css" />
    <link rel="stylesheet" href="css/home_message.css">
    <style>
        /* 增加锚点跳转过度效果 */
        html, body{
            scroll-behavior: smooth;
        }
        /* 头像旁的徽章样式 */
        .isShow{
            display: none;
        }
        /* 解决使用Vue.js页面加载数据的时候，页面闪现原始代码 */
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div style="position: relative;" id="app" v-cloak>

        <!-- 头部导航栏 -->
        <div class="layui-layout layui-layout-admin">
            <!-- 导航 -->
            <div class="layui-header">
                <!-- log -->
                <div class="layui-logo">
                    <img src="../image/logo.png" style="margin-top: -15px;margin-left: -25px;">
                    <!-- <span>阿里迪里考试</span> -->
                </div>

                <!-- 头部区域（可配合layui已有的水平导航） -->
                <ul class="layui-nav layui-layout-right" style="margin-right: 130px;">
                    <li class="layui-nav-item"><a href="index.html">首页</a></li>
                    <li class="layui-nav-item"><a href="exam_center.html">试卷中心</a></li>
                    <li class="layui-nav-item"><a href="exam_record.html">考试记录</a></li>
                    <li class="layui-nav-item"><a href="error_question.html">错题本</a></li>
                </ul>
                <ul class="layui-nav layui-layout-right">
                    <li class="layui-nav-item"><a href="javascript:;"> <img v-bind:src="'../image/'+user.image"
                                class="layui-nav-img">
                                <span class="layui-badge-dot" :class="{isShow:unreadNum==0}" style="top: 30%;margin: -5px -8px 0;"></span>
                        </a>
                        <dl class="layui-nav-child">
                            <dd>
                                <a href="personal.html">个人中心</a>
                            </dd>
                            <dd>
                                <a href="home_message.html">消息中心
                                <span class="layui-badge" :class="{isShow:unreadNum==0}" style="margin-top: -20px;right: -3px;border-radius: 50%;">
                                    {{unreadNum}}</span></a>
                            </dd><hr>
                            <dd>
                                <a id="logout" style="cursor: pointer;">退出</a> 
                            </dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>

        <!--消息中心-->
        <div class="app-contain" style="margin-top: 100px;">

            <!-- 无内容提示框 -->
            <div class="paper-no-tip" v-if="messages.length==0 || messages==null">
                <div>
                    <img src="image/tip.png"><br>
                    <span style="font-size: 14px;color: #9b9b9b;">暂无消息</span>
                </div>
            </div>
            
            <div v-if="!messages.length==0 || !messages==null" class="el-card is-always-shadow" style="padding-top: 80px;padding-bottom: 80px;">
    
                <div class="layui-collapse" lay-accordion="test" id="messageApp">
                    
                    <div class="layui-colla-item" v-for="(m,i) in messages.slice(startNum,endNum)" @click="change(m.messageId,m.status,i,$event)" :key="i">
                        <h2 class="layui-colla-title" style="user-select: none;"><span style="width: 1000px;display: inline-block;">{{m.title}}</span>
                            <span :class="{not:m.status==1,same:1==1}">{{m.status==1?'未读':'已读'}}</span>
                            <i class="layui-icon layui-colla-icon layui-icon-right"></i>
                        </h2>
                        <div class="layui-colla-content" style="user-select: none;">
                            <div>发送人：{{m.sendUserName}}</div>
                            <div>发送时间：{{m.createTime}}</div>
                            <div>发送内容：{{m.content}}</div>
                        </div>
                    </div>
                    

                    <!-- <div class="layui-colla-item">
                        <h2 class="layui-colla-title">你好，同学<span class="el-tag el-tag-error"
                                style="margin-left: 938px;">已读</span></h2>
                        <div class="layui-colla-content">
                            <div>发送人：admin</div>
                            <div>发送时间：2021-6-11 8:35:12</div>
                            <div>发送内容：考试请不要作弊</div>
                        </div>
                    </div> -->
                </div>
                <div class="el-pagination" v-if="!messages.length==0 || !messages==null">
                    <div>
                        <i class="layui-icon btn-prev disabled" title="上一页" @click="up"> &#xe603;</i>
                        <span>{{currPage}}</span>
                        <i class="layui-icon btn-next" v-bind:class="{disabled:pageSum==1}" title="下一页" @click="down">&#xe602;</i>
                    </div>
                </div>
            </div>
        </div>


        <div id="back-top">
            <i class="layui-icon layui-icon-top" style="font-size: 38px;font-weight: 600;"></i>
        </div>

        <!-- 底部板块 -->
        <div style="width: 100%;margin-bottom: 0">
            <footer class="el-footer user-footer app-item-contain footer-mai-d">
                <div class="container">
                    <div class="left">
                        <div class="footer-main element">
                            <span>新手指南</span>
                            <a href="https://www.mindskip.net/buy.html" target="_blank">购买中心</a>
                            <a href="https://www.mindskip.net/document/维多多培训考试系统.pdf" target="_blank">系统简介</a>
                            <a href="https://www.mindskip.net/document/维多多培训考试系统用户手册.pdf" target="_blank">用户手册</a>
                        </div>



                        <div class="footer-main element">
                            <span>合作伙伴</span>
                            <a>中国红十字会</a><a>中国人民解放军</a>
                            <a>国家标准技术审评中心</a>
                            <a>中科软科技股份有限公司</a>
                        </div>

                        <div class="footer-main element">
                            <span>关于我们</span>
                            <a href="https://www.mindskip.net" target="_blank">企业官网</a>
                            <a href="https://www.mindskip.net/wdd.html" target="_blank">产品介绍</a>
                            <a class="feedback-link">意见反馈</a>
                        </div>



                    </div>
                    <div class="right">
                        <table>
                            <tr>
                                <td width="130px">
                                    <img src="image/4.png" alt="" srcset="" width="100px" height="100px">
                                </td>
                                <td>
                                    <img src="image/5.jpg" alt="" srcset="" width="100px" height="100px">
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: center; padding-top: 20px;padding-right: 20px;">
                                    <span>H5</span>
                                </td>
                                <td style="text-align: center;padding-top: 20px;"><span>团队群</span></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </footer>
            <div class="foot-copyright">
                <span>Copyright © 2021 在校开发团队所有</span>
            </div>
        </div>
        
    </div>

    
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/Vue.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="js/same.js"></script>
    <script src="js/home_message.js"></script>
    
</body>

</html>